<template>
  <div class="inner">
    <a
      class="list scroll-animate classGo animated go"
      data-tclass="go"
      target="_blank"
      style="visibility: inherit; opacity: 1"
    >
      <div class="imgBox">
        <div
          class="imgWrap"
          ref="imgWrapEl"
          @mouseleave="onMouseLeave"
          @mousemove="onMouseMove"
          @mouseenter="onMouseEnter"
          style="transform: matrix(1, 0, 0, 1, 0, 0)"
        >
          <div
            class="pic"
            ref="picEl"
            style="
              background-image: url('https://www.jansem.cn/tmp/uploads/20220809/350954b03146e3ae215aa34b8d37a368.jpg');
            "
          ></div>
          <div class="msg">
            <span class="company">
              <img src="https://workyd.com/image/avator.png" alt="logo" />
            </span>
            <h3 class="f-20">Ciko猫树</h3>
            <p class="d-gc f-14">文案内容整理/电商详情页设计/图片拍摄</p>
          </div>
        </div>
      </div>
    </a>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { gsap } from "gsap";

const hello = ref("hello world");
const imgWrapEl = ref(null);
const picEl = ref(null);
function getMousePos(e: MouseEvent) {
  let posx = 0;
  let posy = 0;
  // 移除不必要的兼容性检查，现代浏览器中事件对象总是存在
  if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
  } else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
  return { x: posx, y: posy };
}
function getTop(element: any) {
  var top;
  while (element.offsetTop === void 0) {
    element = element.parentNode;
  }
  top = element.offsetTop;
  while ((element = element.offsetParent)) {
    top += element.offsetTop;
  }
  return top;
}
let mouseTime: any = null;
const onMouseEnter = (e: MouseEvent) => {
  clearTimeout(mouseTime);
  // mouseTime = setTimeout(() => {
  //   gsap.to(picEl.value, {
  //     duration: 0.5,
  //     ease: "Power3.easeOut",
  //     scale: 1.1,
  //   });
  // }, 40);
};
const onMouseMove = (ev: MouseEvent) => {
  const mousepos = getMousePos(ev);
  const bounds = ((imgWrapEl.value as unknown) as HTMLElement).getBoundingClientRect();
  const relmousepos = {
    x: mousepos.x - bounds.left,
    y: mousepos.y - getTop(picEl.value),
  };
  let t = { x: [-20, 20], y: [-20, 20] },
    r = { x: [15, -15], y: [-15, 15] };
  const transforms = {
    translation: {
      x: ((t.x[1] - t.x[0]) / bounds.width) * relmousepos.x + t.x[0],
      y: ((t.y[1] - t.y[0]) / bounds.height) * relmousepos.y + t.y[0],
    },
    rotation: {
      x: ((r.x[1] - r.x[0]) / bounds.height) * relmousepos.y + r.x[0],
      y: ((r.y[1] - r.y[0]) / bounds.width) * relmousepos.x + r.y[0],
    },
  };

  // 使用gsap.to替代TweenMax.to
  gsap.to(imgWrapEl.value, {
    duration: 0.7,
    ease: "power1.out", // 注意：GSAP 3中的ease命名方式变更
    x: transforms.translation.x,
    y: transforms.translation.y,
    rotationX: transforms.rotation.x,
    rotationY: transforms.rotation.y,
  });
};
const onMouseLeave = (ev: MouseEvent) => {
  clearTimeout(mouseTime);
  gsap.to([imgWrapEl.value], {
    duration: 1.5,
    ease: "Power4.easeOut",
    x: 0,
    y: 0,
    rotationX: 0,
    rotationY: 0,
  });
  // gsap.to(picEl.value, {
  //   duration: 1.5,
  //   ease: "Power4.easeOut",
  //   scale: 1,
  // });
};
onMounted(() => {
  console.log(hello.value);
});
</script>
<style lang="scss" scoped>
.inner {
  padding: 6.8% 5.8%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.inner .list {
  width: calc(100% / 3);
  padding: 0 0.5rem 0.8rem 0.5rem;
  transition: transform 1.6s ease-in-out;
  display: block;
  cursor: pointer;
}

.inner .list.go {
  transform: none !important;
}
.inner .imgBox {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: calc(90% + 4rem);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: perspective(100rem);
  transform: perspective(100rem);
}
.inner .imgBox .imgWrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 1rem;
  transition: box-shadow 0.5s ease-in-out;
  &:hover {
    .pic {
      transform: scale(1.1);
    }
  }
}
.inner .imgBox .imgWrap .pic {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: calc(100% - 4rem);
  background-size: cover;
  transition: all 0.5s;
}
.inner .imgBox .imgWrap .pic > div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}
.inner .imgBox .imgWrap .msg {
  height: 5rem;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #fff;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 10% 0 40%;
  transition: background-color 0.5s ease-in-out;
}
.inner .imgBox .imgWrap .msg .company {
  position: absolute;
  left: 8%;
  top: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  line-height: 1rem;
  text-align: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #efefef;
  box-shadow: 0.26rem 0.23rem 0.43rem -0.1rem rgba(0, 0, 0, 0.05);
}
.inner .imgBox .imgWrap .msg .company > img {
  object-fit: contain;
  width: 100%;
  height: 30%;
}
.inner .imgBox .imgWrap .msg h3 {
  width: 100%;
  transition: color 0.5s ease-in-out;
}
.inner .imgBox .imgWrap .msg p {
  width: 100%;
  line-height: 1.6;
  transition: color 0.5s ease-in-out;
}
.inner .imgBox.imgClip .imgWrap .pic {
  backface-visibility: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
}
.inner .imgBox:hover .imgWrap {
  box-shadow: 0 0 1.8rem 1.3rem rgba(0, 0, 0, 0.15);
}
.inner .imgBox:hover .imgWrap .msg {
  background-color: #0c41b2;
}
.inner .imgBox:hover .imgWrap .msg h3 {
  color: #fff;
}
.inner .imgBox:hover .imgWrap .msg p {
  color: #fff;
}
#pro #main .r2 {
  position: relative;
}
#pro #main .r2 .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
</style>
